<template>
  <div class="container">
    <div class="filter-container">
      <el-tree class="tree" :data="homeworkList" :props="hwListTable" @node-click="chooseHw" />
    </div>
    <!-- -----------------------------------------------------------------作业管理表格栏---------------------------------- -->
    <div class="table-container">
      <el-table
        :data="hwData"
        border
        fit
        highlight-current-row
        style="width: 100%"
      >
        <el-table-column
          :label="table.number"
          type="index"
          align="center"
          width="80px"
        >
        </el-table-column>
        <el-table-column
          :label="table.hwTitle"
          prop="title"
          width="180px"
          align="center"
        >
          <!-- {{ this.nowHwName }} -->
        </el-table-column>
        <el-table-column
          :label="table.name"
          prop="personalInfoVo.username"
          width="180px"
          align="center"
        >
        </el-table-column>
        <el-table-column
          :label="table.submitTime"
          prop="submitTime"
          width="180px"
        >
        </el-table-column>
        <el-table-column
          :label="table.state"
          prop="state"
          width="100px"
        >
        </el-table-column>
        <el-table-column
          :label="table.score"
          prop="score"
          width="100px"
        >
        </el-table-column>
        <el-table-column
          :label="table.actions"
          align="center"
          min-width="100px"
        >
          <template #default="scope">
            <el-button
              type="primary"
              size="mini"
              @click="seekCorrectInfo(scope.row)"
            >
              {{ table.query}}
            </el-button>
            <el-button
              size="mini"
              @click="correctHw(scope.row)"
            >
              {{ table.correct }}
            </el-button>
            <el-button
              size="mini"
              type="danger"
              @click="redoHw(scope.row)()"
            >
              {{ table.delete }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>      
    </div>
    
    <!-- --------------------------------------个人信息对话框---------------------------------------------------------------- -->
    <el-dialog
        v-model="this.isCorrectInfoVisible"
        title="个人信息"
        width="40%"
        >      
        <el-form :model="this.hwCorrectInfo" label-width="120px">
            <el-form-item :label="table.name" prop="score">
                <el-input type="text" v-model="stuInfo.username" disabled/>
            </el-form-item>
            <el-form-item :label="table.sex" prop="score">
                <el-input type="text" v-model="stuInfo.sex" disabled/>
            </el-form-item>
            <el-form-item :label="table.phoneNumber" prop="score">
                <el-input type="text" v-model="stuInfo.phoneNumber" disabled/>
            </el-form-item>
            <el-form-item :label="table.score" prop="score">
                <el-input type="text" v-model="hwCorrectInfo.score" disabled/>
            </el-form-item>
            <el-form-item :label="table.comment" prop="comment">
                <el-input type="textarea"
                  v-model="hwCorrectInfo.comment"
                  :autosize="{ minRows: 2, maxRows: 4 }"
                  disabled />
            </el-form-item>
        </el-form>
        <template #footer>
            <span>
                <el-button @click="this.isStuInfoVisible = false">取消</el-button>
            </span>
        </template>
    </el-dialog>
  </div>
</template>

<script>
import { onMounted, reactive, toRefs } from 'vue'
// import { da } from 'element-plus/lib/locale'
// import axios from '@/utils/axios'
// import { ElMessage } from 'element-plus'
export default {
  name: 'Good',
  data(){
    return{
      // nowHwName: ''
    }
  },
  setup() {
    const state = reactive({
      loading: false,
      tableData: [], // 数据列表
      multipleSelection: [], // 选中项
      total: 0, // 总条数
      currentPage: 1, // 当前页
      pageSize: 10 // 分页大小
    })
    const dataMap = reactive({
      table: {
        number: "序号",
        hwTitle: "作业主题",
        name: "学生名",
        sex: "性别",
        phoneNumber: "手机号",
        submitTime: "提交时间",
        state: "批阅状态",
        score: "得分",
        comment: "评语",
        actions: "操作",
        query: "查看评语",
        correct: "批改",
        delete: "重做"
      },
      // 是否展示作业批改信息
      isCorrectInfoVisible: false,
      // 作业批改信息
      hwCorrectInfo:'',
      // 该作业下学生信息
      stuInfo: "",

      hwData: [],
      homeworkList: "",
      hwListTable: {
        label: "name",
        children: "hw"
      },
      getData() {
        dataMap.hwData = [
          {
            hwId: 'aa1123',
            hwTitle: "第一次讲座作业",
            name: "张三",
            submitTime: "2022/7/26/15：35",
            state: "corrected",
            score: "98"
          }
        ]
      }
    })
    onMounted(() => {
      // dataMap.getData()
    })
    return {
      ...toRefs(state),
      ...toRefs(dataMap)
    }

  },
  mounted() {
    // this.getClassList();
    this.getTreeList()
  },
  methods: {
    seekCorrectInfo(row){
      let formData = new FormData()
      formData.append('hwId',row.hwId)
      this.$axios
        .post('homework/correct/info',formData)
        .then(response => {
        this.hwCorrectInfo = response.data
        this.stuInfo = row.personalInfoVo
        this.isCorrectInfoVisible = true
          // this.$message.success("退回作业成功！")
        })
    },
    correctHw(row) {
      this.$router.push({
        name: 'TeacherHomeworkCorrectingDetail',
        params: {
          Hwid: row.hwId,
        }
      });
    },
    redoHw(row){
      let formData = new FormData();
      formData.append('hwId', row.hwId);
      this.$axios
        .post('homework/del',formData)
        .then(response => {
          console.log(response)
          this.$message.success("退回作业成功！")
        })
      this.getData()
    },
    
    getTreeList() {
      var _this = this
      this.$axios
        .get('teacher/treelist')
        .then( response => {
            let stateCode = response.headers["state"]
            if(stateCode=="200"){
              this.homeworkList = response.data;
            }
            else if(stateCode==null){
                this.$message.success("请求数据异常！")
            }
            else{
                this.$message.error(this.$enum.getDescByValue('STATE', stateCode))
            }

        })
        .catch(function (error){
            let stateCode = error.response.headers["state"]                            
            if(stateCode!=""){
                _this.$message.error(_this.$enum.getDescByValue('STATE', stateCode))
            }
            else{
                _this.$message.error("后端异常")
            }
        })
        .then(function (){
            console.log("测试成功")
        }) 
    },

    // getClassList() {
    //   this.$axios
    //     .get('teacher/classgrade/basicinfo')
    //     .then(response => {
    //       this.homeworkList = response.data;
    //       this.getSubjectList();
    //     })
    // },
    // getSubjectList() {
    //   for (let i = 0; i < this.homeworkList.length; i++) {
    //     this.$axios({
    //       url: 'subject/list',
    //       method: 'post',
    //       params: {
    //         classId: this.homeworkList[i].classgradeId
    //       }
    //     }).then(response => {
    //       if(response.data !== undefined){
    //         this.homeworkList[i].hw = response.data;
    //         for (let j = 0; j < response.data.length; j++) {
    //           this.homeworkList[i].hw[j].name = this.homeworkList[i].hw[j].subjectTitle;
    //         }
    //       }
    //     })
    //   }
    // },
    init(){
      this.homeworkList = [...this.homeworkList];
    },
    chooseHw(data){
      var _this = this
      let id = data.id;
      if(id !== undefined) {
        // this.nowHwName = data.name;
        this.$axios({
          url : '/homework/hwlist',
          method : 'post',
          params : {
            subId : id
          }
        })
        .then( response => {
            let stateCode = response.headers["state"]
            if(stateCode=="200"){
              this.hwData = response.data;
            }
            else if(stateCode==null){
                this.$message.success("请求数据异常！")
            }
            else{
                this.$message.error(this.$enum.getDescByValue('STATE', stateCode))
            }

        })
        .catch(function (error){
            let stateCode = error.response.headers["state"]                            
            if(stateCode!=""){
                _this.$message.error(_this.$enum.getDescByValue('STATE', stateCode))
            }
            else{
                _this.$message.error("后端异常")
            }
        })
        .then(function (){
            console.log("测试成功")
        }) 
    }
    }
  },
  // watch:{
  //   homeworkList: function (){
  //   },
  //   deep: true
  // }
}
</script>

<style scoped>
  .container {
    height: 100%;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    box-sizing: border-box;
  }
  .el-card.is-always-shadow {
    min-height: 100%!important;
  }

  .filter-container {
    height: 100%;
    width: 10%;
    padding: 5px;
    /* display: flex;
    justify-content: flex-start;
    align-items: center; */
    box-sizing: border-box;
  }
  .table-container {
    height: 100%;
    width: 90%;
    padding: 5px;
    box-sizing: border-box;
  }
  .tree {
    height: 90%;
    width: 100%;

  }
</style>